<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 响应式布局代码 -->
		<meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no"/>
		<title></title>
		<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="UTF-8"></script>
		<script src="js/popper.min.js" type="text/javascript" charset="UTF-8"></script>
		<!-- 加载bootstrap  css样式 -->
		<link rel="stylesheet" href="css/bootstrap.min.css"/>
		<!-- 加载bootstrap  js脚本 -->
		<script src="js/bootstrap.min.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>	
		<div>	
		</div>
		<!--
			alert   				提示框样式
			alert-danger 			红色风格
			alert-dismissable 		可以关闭的
			fade 					动画效果
			show 					当前是显示	
			data-dismiss="alert"    事件处理 关闭alert
			&times;                 显示的×
		-->
		<div class="alert alert-danger alert-dismissible fade show">
			<button type="button" class="close" data-dismiss="alert">&times;</button>
			<strong>警告</strong>具体内容！
		</div>
		
		<div class="alert alert-primary">
			<strong>操作</strong>OK!
		</div>
		
		<div class="alert alert-warning alert-dismissible fade show" role="alert">
			<strong>Holy guacamole!</strong> You should check in on some of those fields below.
			<button type="button" class="close" data-dismiss="alert" aria-label="Close">
				<span aria-hidden="true">&times;</span>
			</button>
		</div>
	</body>
</html>
